<template>
  <div class="c-bg-sgray">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="c-pb100" v-if="assign">
      <div class="c-ph24 c-pt20 c-bg-white">
        <div class="c-wb-ba">
          <div class="c-ws-n c-mt4 c-inlineblack fl c-fc-white c-fs18 c-ph4 c-pv2 c-br8 c-mr6 c-textAlign-c theme-bg" v-if="assign.isSubmit">
            {{assign.isSubmit?'已提交':''}}
          </div>
          <div class="c-fs28 c-fc-xblack c-fw600">{{ assign.name }}</div>
        </div>
        <div class="c-fs22 c-fc-gray c-pt10 c-pb20">发布时间 {{assign.createdAt}} </div>
      </div>
      <div v-if="homeworkType==2" class="c-ph24">
        <div class="c-maxh200 c-text-hidden maxMask">
          <div v-for="(item,index) in relates" :key="index">
            <div class="c-ph24 c-bg-white c-br20 c-mt22 c-p c-pt44 c-pb24">
              <div class="c-fs18 c-ph16 c-pv4 c-br-tl20 c-br-br20 c-pa c-p-t0 c-p-l0 theme-bg c-fc-white">{{item.type == 1
                ? "单选题"
                : item.type == 2
                  ? "多选题"
                  : item.type == 3
                    ? "简答题"
                    : item.type == 4
                      ? "判断题"
                      : item.type == 5
                        ? "填空题"
                        : ""}}</div>
              <prolblem :problemDate="item" :bigNumber="index" :isMaskAll="true"></prolblem>
              <div v-if="item.type==1||item.type==2||item.type==3||item.type==4||item.type==5">
                <single-problem @clickShowVideo="clickShowVideo" :questionInfo="item.questionDetail" :number="index"></single-problem>
              </div>
            </div>
          </div>
        </div>
        <div class="c-flex-row c-flex-center c-pv20">
          <div class="theme-fc c-fs24" @click="showAll">查看全部</div>
        </div>
        <div v-if="!assign.isSubmit" class="c-pt40">
          <loading-status-tem :noData="''" :noDataText="'您还没提交作业，快去完成作业吧！'" :pt20="true"></loading-status-tem>
        </div>
        <div v-if="homeworkAnswer.length>0" class="c-fs28 c-fc-xblack c-fw600 c-mt20">
          我的答案
        </div>
        <div v-if="homeworkAnswer.length>0&&assign">
          <homeworkerResult :isMy="true" @setLike="setLike" @clickShowVideo="clickShowVideo" :homeworkAnswer="homeworkAnswer" :userAnswer="assign.user" :submitTime="assign.submitTime" @reWorker="reWorker" @lookAncy="lookAncy"></homeworkerResult>
        </div>
        <div v-if="otherAnswer.length>0" class="c-fs28 c-fc-xblack c-fw600 c-mt20">
          同学作业
        </div>
        <div v-if="otherAnswer.length>0">
          <homeworkerResult :isMy="false" @setLike="setLike" :isOther="1" v-for="(item,index) in otherAnswer" :key="index"
            @clickShowVideo="clickShowVideo" :AnswerIndex="index" :homeworkAnswer="item.answer" :userAnswer="item.user" :submitTime="item.submitTime"></homeworkerResult>
        </div>
        <loading-status-tem v-if="otherAnswer.length>0" :dataStatus="answerdataStatus" noDataText="我也是有底线的"></loading-status-tem>
      </div>
      <div v-if="homeworkType==1">
        <div class="c-bg-white c-ph24 c-pb20">
          <div :class="
            nobtn && showDesc ? '' : 'c-maxh150 c-text-hidden maxMask'
          ">
            <div ref="text" id="text">
              <div class="tinymce-text c-ww-ba c-contexty-scroll" v-if="assign.detail">
                <div v-for="(cItem,cIndex) in assign.detail.split('\n')" :key="cIndex">{{ cItem }}</div>
              </div>
              <div v-if="picture.length>0" v-for="(item,index) in picture" :key="index" class="c-p c-mt10 c-w100 c-flex-row c-flex-center c-text-hidden c-br20">
                <img class="c-w100" :src="$addXossFilter(item.imageUrl, require('../../../assets/defult270.png'))" alt="" />
              </div>
              <div class="c-pt10" v-if="audios.length>0" v-for="(item,index) in audios" :key="index">
                <aplayer preload="auto" :music="{
                  artist:' ',
                  title: item.name,
                  src: item.audioUrl,
                  pic:require('@/assets/i/wap/clockIn/audio_cover_d.png'),
                }" :volume="1" repeat="repeat-one" :isAplayerShow="isAplayerShow" @play="playAplayer"/>
              </div>
            </div>
          </div>
          <div
            v-show="!showDesc&&nobtn"
            @click="clickDesc"
            class="c-flex-row c-flex-center c-pb10 c-fs22 theme-fc c-mt20"
          >
            <span class="c-pr10">展开</span>
            <i class="iconfont c-lh">&#xe816;</i>
          </div>
          <div
            v-show="showDesc&&nobtn"
            @click="clickDesc"
            class="c-flex-row c-flex-center c-pb10 c-fs22 theme-fc c-mt20"
          >
            <span class="c-pr10">收起</span>
            <i class="iconfont c-lh c-rotate180">&#xe816;</i>
          </div>
        </div>
        <div v-if="!assign.isSubmit" class="c-pt40">
          <loading-status-tem :noData="''" :noDataText="'您还没提交作业，快去完成作业吧！'" :pt20="true"></loading-status-tem>
        </div>
        <div v-if="userAnswer" class="c-fs28 c-ph24 c-fc-xblack c-fw600 c-mt20">
          我的答案
        </div>
        <div v-if="userAnswer&&assign" class="c-mt24 c-ph24 ">
          <div class="c-flex-row c-aligni-center">
            <img class="c-ww68 c-hh68 c-brp50" v-if="assign.user" :src="$addXossFilter(assign.user.headimgurl || require('@/assets/defult_head.png'))" alt="" />
            <div class="c-pl20 c-flex-grow1 c-w0">
              <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb">
                <div class="c-flex-row">
                  <span class="c-maxw160 c-pr20 c-text-ellipsis1 c-fc-xblack" v-if="assign.user">{{assign.user.nickname || '未知'}}</span>
                </div>
              </div>
              <div class="c-fs20 c-fc-gray c-mt6" v-if="assign.user">{{assign.submitTime || '未知'}}</div>
            </div>
            <div class="c-flex-row c-aligni-center c-justify-end c-bd-t1 c-mh24 c-mt10">
              <div class="theme-bg c-fc-white c-pv10 c-ph24 c-br32 c-fs20" @click="reWorker">重新编辑</div>
            </div>
          </div>
          <div class="c-bg-white c-br20 c-mt20 c-fs26">
            <div class="c-pt30 c-fs246 c-ph14">
              <!-- 文本回答 -->
              <div v-if="userAnswer.answer" :class="
                showMore && showDescAnswer ? '' : 'c-maxh150 c-text-hidden maxMask'">
                <div class="c-p c-lh42 c-pl10" id="textAnswer" ref="textAnswer" >
                  <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in userAnswer.answer.split('\n')" :key="cIndex">{{ cItem }}</div>
                  <!-- <div class="c-ww-bw c-lh42" v-html="userAnswer.answer"></div> -->
                </div>
              </div>
              <div class="c-flex-row c-justify-end c-w100" v-if="userAnswer.answer">
                <div @click.stop="clickShowMore" v-if="showDescAnswer" class="theme-fc c-fs20">{{showMore ? '收起':'展开'}}</div>
              </div>
              <div :class="{'c-mt20': userAnswer.answer}">
                <div class="c-flex-row c-flexw-wrap">
                  <!-- 语音回答 -->
                  <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in userAnswer.audioArr" :key="index"
                    class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-ml4 c-mr8">
                    <div class="box c-ww32">
                      <div class="wifi-symbol">
                        <div class="wifi-circle first theme-bd2"></div>
                        <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                        <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                      </div>
                    </div>
                    <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
                  </div>
                </div>
                <div class="c-flex-row c-flexw-wrap">
                  <!-- 视频回答 -->
                  <div @click.stop="clickShowVideo(item.videoMp4, item.videoM3u8)" class="c-p c-ww166 c-hh100 c-mb20 c-ml4 c-mr8" v-for="(item,index) in userAnswer.videoArr" :key="index">
                    <img class="c-w100 c-h c-br20" :src="$addXossFilter(item.videoCover, 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg4.png')" alt="" />
                    <div v-if="item.videoCover" class="img-play-btn c-br20">
                      <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
                    </div>
                  </div>
                </div>
                <!-- 图片回答 -->
                <div class="c-flex-row c-flexw-wrap">
                  <div class="c-ww166 c-hh166 c-mb20 c-p c-ml4 c-mr8" v-for="(item,index) in userAnswer.imgArr" :key="index">
                    <img @click.stop="clickPreviewImage(item.url, userAnswer.imgArr)" class="c-ww166 c-hh166 c-br20" :src="$addXossFilter(item.url)" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div class="c-ph24 c-pb20" v-if="comments">
              <div class="c-bg-sgray c-br20 c-ph14">
                <div class="c-flex-row c-aligni-center c-justify-sb c-ph10">
                  <div class="c-fs28 c-fc-xblack c-fw600">老师点评</div>
                  <div class="iconfont c-fs80 theme-fc">&#xe7cb;</div>
                </div>
                <div class="c-fs24">
                  <!-- 文本回答 -->
                  <div v-if="comments.comments">
                    <div class="c-p c-lh42 c-pl10">
                      <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in comments.comments.split('\n')" :key="cIndex">{{cItem}}</div>
                    </div>
                  </div>
                  <div :class="{'c-mt20': comments.comments}">
                    <div class="c-flex-row c-flexw-wrap">
                      <!-- 语音回答 -->
                      <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in comments.audioArr" :key="index"
                        class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-mh10">
                        <div class="box c-ww32">
                          <div class="wifi-symbol">
                            <div class="wifi-circle first theme-bd2"></div>
                            <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                            <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                          </div>
                        </div>
                        <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
                      </div>
                    </div>
                    <span @click.stop="clickPreviewImage(comments.imgArr[0].url,comments.imgArr)" v-if="comments.imgArr&&comments.imgArr.length" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看图片</span>
                    <span v-if="comments.videoArr && comments.videoArr.length" v-for="(item,index) in comments.videoArr" :key="index" @click.stop="clickShowVideo(item.videoMp4,item.videoM3u8)" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看视频</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb c-mt20">
            <div class="c-fs20 c-fc-gray" v-if="assign.submitTime">提交时间:{{assign.submitTime || '未知'}}</div>
            <div class="c-flex-row c-aligni-center">
              <div class="iconfont c-fs36 theme-fc c-mr10" v-if="assign.user" @click="setLike('',true,assign.user.id,assign.user.isLike)">{{assign.user.isLike?'&#xe6f9;':'&#xe6ba;'}}</div>
              <div class="c-fs24 theme-fc" v-if="assign.user">{{assign.user.like}}</div>
            </div>
          </div>
        </div>
        <div v-if="otherAnswer.length>0" class="c-fs28 c-ph24 c-fc-xblack c-fw600 c-mt20">
          同学答案
        </div>
        <div v-if="otherAnswer.length>0">
          <div v-for="(item,index) in otherAnswer" :key="index" class="c-mt24 c-ph24 ">
            <div class="c-flex-row c-aligni-center" >
              <img class="c-ww68 c-hh68 c-brp50" v-if="item.user" :src="$addXossFilter(item.user.headimgurl || require('@/assets/defult_head.png'))" alt="" />
              <div class="c-pl20 c-flex-grow1 c-w0">
                <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb">
                  <div class="c-flex-row">
                    <span class="c-maxw160 c-pr20 c-text-ellipsis1 c-fc-xblack" v-if="item.user">{{item.user.nickname || '未知'}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-bg-white c-br20 c-mt20 c-fs26" v-for="(otherItems,index) in item.answer" :key="index">
              <div class="c-pt30 c-fs246 c-ph14">
                <!-- 文本回答 -->
                <answerText v-if="otherItems.answer" :answer="otherItems.answer" :answerIndex="index"></answerText>
                <div :class="{'c-mt20': otherItems.answer}">
                  <div class="c-flex-row c-flexw-wrap">
                    <!-- 语音回答 -->
                    <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in otherItems.answer.audioArr" :key="index"
                      class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-ml4 c-mr8">
                      <div class="box c-ww32">
                        <div class="wifi-symbol">
                          <div class="wifi-circle first theme-bd2"></div>
                          <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                          <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                        </div>
                      </div>
                      <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
                    </div>
                  </div>
                  <div class="c-flex-row c-flexw-wrap">
                    <!-- 视频回答 -->
                    <div @click.stop="clickShowVideo(item.videoMp4, item.videoM3u8)" class="c-p c-ww166 c-hh100 c-mb20 c-ml4 c-mr8" v-for="(item,index) in otherItems.answer.videoArr" :key="index">
                      <img class="c-w100 c-h c-br20" :src="$addXossFilter(item.videoCover, 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg4.png')" alt="" />
                      <div v-if="item.videoCover" class="img-play-btn c-br20">
                        <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
                      </div>
                    </div>
                  </div>
                  <!-- 图片回答 -->
                  <div class="c-flex-row c-flexw-wrap">
                    <div class="c-ww166 c-hh166 c-mb20 c-p c-ml4 c-mr8" v-for="(item,index) in otherItems.answer.imgArr" :key="index">
                      <img @click.stop="clickPreviewImage(item.url, item.imgArr)" class="c-ww166 c-hh166 c-br20" :src="$addXossFilter(item.url)" alt="" />
                    </div>
                  </div>
                </div>
                <div class="c-ph24 c-pb20" v-if="otherItems.answer.comments">
                  <div class="c-bg-sgray c-br20 c-ph14">
                    <div class="c-flex-row c-aligni-center c-justify-sb c-ph10">
                      <div class="c-fs28 c-fc-xblack c-fw600">老师点评</div>
                      <div class="iconfont c-fs80 theme-fc">&#xe7cb;</div>
                    </div>
                    <div class="c-fs24">
                      <!-- 文本回答 -->
                      <div v-if="otherItems.answer.comments.comments">
                        <div class="c-p c-lh42 c-pl10">
                          <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in otherItems.answer.comments.comments.split('\n')" :key="cIndex">{{cItem}}</div>
                        </div>
                      </div>
                      <div :class="{'c-mt20': otherItems.answer.comments.comments}">
                        <div class="c-flex-row c-flexw-wrap">
                          <!-- 语音回答 -->
                          <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in otherItems.answer.comments.audioArr" :key="index"
                            class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-mh10">
                            <div class="box c-ww32">
                              <div class="wifi-symbol">
                                <div class="wifi-circle first theme-bd2"></div>
                                <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                                <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                              </div>
                            </div>
                            <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
                          </div>
                        </div>
                        <span @click.stop="clickPreviewImage(otherItems.answer.comments.imgArr[0].url,otherItems.answer.comments.imgArr)" v-if="otherItems.answer.comments.imgArr&&otherItems.answer.comments.imgArr.length" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看图片</span>
                        <span v-if="otherItems.answer.comments.videoArr && otherItems.answer.comments.videoArr.length" v-for="(item,index) in otherItems.answer.comments.videoArr" :key="index" @click.stop="clickShowVideo(item.videoMp4,item.videoM3u8)" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看视频</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb c-mt20">
              <div class="c-fs20 c-fc-gray" v-if="item.user">提交时间:{{item.submitTime || '未知'}}</div>
              <div class="c-flex-row c-aligni-center">
                <div class="iconfont c-fs36 theme-fc c-mr10" @click="setLike(index,false,item.user.id,item.user.isLike)">{{item.user.isLike?'&#xe6f9;':'&#xe6ba;'}}</div>
                <div class="c-fs24 theme-fc">{{item.user.like}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-pf c-p-l0 c-p-r0 c-p-b0 c-w100 c-hh88 c-ph24 c-flex-row c-flex-center c-bg-white" v-if="!assign.isSubmit">
      <div class="c-hh64 c-fs24 c-flex-row c-aligni-center c-justify-sb c-bd1-ccc c-br32 c-text-hidden c-mr20">
        <div @click="handleCampDirectory(0)" class="c-textAlign-c c-hh64 c-lh64 c-ww120">目录</div>
      </div>
      <div class="c-flex-grow1 c-fs24 c-hh64 c-br32 c-flex-row c-flex-center c-fc-white theme-bg c-fc-white" @click="goDoHomework">写作业</div>
      <!-- <div class="c-flex-grow1 c-fs24 c-hh64 c-br-tl32 c-br-bl32 c-bd1-ccc c-flex-row c-flex-center c-bg-white c-fc-sgray" @click="goDoHomework">上一任务</div>
      <div class="c-flex-grow1 c-fs24 c-hh64 c-br-tr32 c-br-br32 c-flex-row c-flex-center c-fc-white theme-bg-gradient" @click="goDoHomework">下一任务</div> -->
    </div>
    <section v-else-if="!campButtonStatus.isTeacher"
      class=" c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1"
    >
      <div class="c-hh64 c-fs24 c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1 c-bd1-ccc c-br32 c-text-hidden">
        <div @click="handleCampDirectory(0)" class="c-textAlign-c c-hh64 c-lh64 c-w28 c-bd-r1-ccc">目录</div>
        <div @click="handleCampDirectory(-1)" :class="[campButtonStatus && campButtonStatus.isPrev ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-bd-r1-ccc"><span v-show="campButtonStatus.isPrev && !campButtonStatus.isPrevUnlock" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>上一任务</div>
        <div @click="handleCampDirectory(1)" :class="[campButtonStatus && campButtonStatus.isNext ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-br-tr32 c-br-br32"><span v-show="campButtonStatus.isNext && !campButtonStatus.isNextUnlock" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>下一任务</div>
      </div>
    </section>
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <open-modal :openModal='isShowAll' @closeModal='hideShowAll'>
      <div class="c-maxh760 c-content-scroll c-ph24 c-bg-sgray c-br-tl20 c-br-tr20" id="scrollrelated" @scroll="onMemberScroll">
        <div v-for="(item,index) in relates" :key="index">
          <div class="c-ph24 c-bg-white c-br20 c-mt22 c-p c-pt44 c-pb24">
            <div class="c-fs18 c-ph16 c-pv4 c-br-tl20 c-br-br20 c-pa c-p-t0 c-p-l0 theme-bg c-fc-white">{{item.type == 1
              ? "单选题"
              : item.type == 2
                ? "多选题"
                : item.type == 3
                  ? "简答题"
                  : item.type == 4
                    ? "判断题"
                    : item.type == 5
                      ? "填空题"
                      : ""}}</div>
            <prolblem :problemDate="item" :isShowAll="isShowAll" :bigNumber="index"></prolblem>
            <div v-if="item.type==1||item.type==2||item.type==3||item.type==4||item.type==5">
              <single-problem @clickShowVideo="clickShowVideo" :questionInfo="item.questionDetail" :number="index"></single-problem>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="我也是有底线的"></loading-status-tem>
      </div>
      <div class="c-w100 c-hh88 c-ph24 c-flex-row c-flex-center c-bg-white" v-if="!assign.isSubmit">
        <div class="c-flex-grow1 c-fs24 c-hh64 c-br32 c-flex-row c-flex-center c-fc-white theme-bg c-fc-white" @click="goDoHomework">写作业</div>
      </div>
    </open-modal>
    <!-- 课程关联的训练营目录 -->
    <camp-directory-dialog v-if="ttId && ttId > 0" ref="campDirectory"></camp-directory-dialog>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import prolblem from "@/components/templates/schoolAssignment/problem.vue";
import singleProblem from "@/components/templates/schoolAssignment/singleProblem.vue";
import homeworkerResult from "@/components/templates/schoolAssignment/homeworkerResult.vue";
import VueAPlayer from "@/plugin/vue-aplayer/vue-aplayer.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import answerText from '@/components/templates/schoolAssignment/answer.vue';
import campDirectoryDialog from "@/components/templates/common/campDirectoryDialog.vue";
let LIMIT = 10
let page = 1
let pagekAnswer = 1
let loading = false
export default {
  name: "ClassDetail",
  components: {
    campDirectoryDialog,
    answerText,
    homeworkerResult,
    OpenModal,
    videoPopup,
    singleProblem,
    prolblem,
    loadingStatusTem,
    Aplayer: VueAPlayer
  },
  data() {
    return {
      nobtn:false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      assign: {},
      showDesc:false,
      showDescAnswer:false,
      showMore:false,
      ttId: "",
      tpId: "",
      tlId: "",
      relId: "",
      picture:[],
      audios:[],
      listPage:1,
      ckfrom: global.ckFrom,
      campId:'10597',
      showColumnList:false,
      modeType:3,
      thwId:0,
      relates:[],
      homeworkType:1,
      dataStatus: 'HAS_MORE_DATA',
      answerdataStatus: 'HAS_MORE_DATA',
      userAnswer:{},
      playAduioSrc:'',
      showVideo:false,
      currentVideoObj:{},
      comments:null,
      isShowAll:false,
      homeworkAnswer:[],
      otherAnswer:[],
      campButtonStatus: {},
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
  },
  watch: {
    $route(to, from) {
      // 新增课程可以关联课程后，可能会从出现从详情页跳入详情页的情况，无法进入activate
      if (to.path == '/homePage/schoolAssignment/assignDetail' && from.path == '/homePage/schoolAssignment/assignDetail') {
        this.inintDate()
      }
    }
  },
  methods: {
    inintDate() {
      this.thwId = this.$route.query.thwId || "";
      this.homeworkType = this.$route.query.homeworkType;
      this.parentType = this.$route.query.parentType || "";
      this.ttId = this.$route.query.ttId || "";
      this.tpId = this.$route.query.tpId || ""; //环节id
      this.tlId = this.$route.query.tlId || "";
      this.relId = this.$route.query.relId || "";
      this.assign = {}
      page = 1
      pagekAnswer = 1
      loading = false
      this.homeworkAnswer = []
      this.otherAnswer = []
      this.relates = []
      this.getAssignDetail();
      this.enrollHomework()
      this.campDirectoryInitData()
      window.addEventListener('scroll', this.windowScrollFunction);
    },
    // 初始化训练营底部目录栏数据
    campDirectoryInitData(type = 1) { // type 1初始化数据  2闯关模式和定期考试需要逐个解锁，所以播放结束后需要先重新获取状态
      this.$nextTick(() => {
        if (!!this.ttId && this.$refs.campDirectory) {
          this.$refs.campDirectory.initData({
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId
          }).then((data) => {
            this.campButtonStatus = data
            const { modeType, dateLockType } = this.campButtonStatus
            // 闯关模式和定期考试更新完状态后直接跳转到下一节
            if (this.parentType != 2 && type == 2 && (modeType == 3 || modeType == 4 || (modeType == 1 && dateLockType == 2)) && this.campButtonStatus.isNextUnlock) {
              this.handleCampDirectory(1)
            }
          })
        }
      })
    },
    handleCampDirectory(type) { // type  0查看目录弹窗  -1上一节  1下一节
      if (this.$refs.campDirectory && !this.isHidePlaying) {
        this.$refs.campDirectory.handleCampDirectory(type)
      }
    },
    //是否滚到底部
    checkScrollBottom(curDom) {
      if (curDom.scrollTop + curDom.clientHeight >= curDom.scrollHeight - 5) {
        return true;
      } else {
        return false;
      }
    },
    onMemberScroll() {
      let domScroll = document.getElementById('scrollrelated');
      if (this.checkScrollBottom(domScroll) && this.dataStatus == 'HAS_MORE_DATA') {
        this.getAssignDetail();
      }
    },
    hideShowAll() {
      this.isShowAll = false
    },
    showAll() {
      this.isShowAll = true
      // this.$refs.problemShowHight.showDescHeight()
    },
    reWorker() {
      if (this.homeworkType == 1) {
        this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/simpleQue?isRewoker=1&homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
      } else {
        this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/schoolAnswer?isRewoker=1&homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
      }
    },
    lookAncy() {
      this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/homeworkerAnswerAnalyze?homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc && this.playAduioSrc.includes("http")) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
      }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    clickPreviewImage(imgUrl, imgArrList) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgArrList) {
        let imgItemUrl = key.content || key.url;
        imgArr.push(imgItemUrl);
      }
      let imgData = {
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
      // wxUtilJs.previewImage({
      //   current: imgUrl, // 当前显示图片的http链接
      //   urls: imgArr // 需要预览的图片http链接列表
      // });
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    clickDesc() {
      if (this.showDesc) {
        this.showDesc = false;
      } else {
        this.showDesc = true;
      }
    },
    // 去写作业
    enrollHomework() {
      let data = {
        ttId:this.ttId,
        thwId:this.thwId
      }
      let postUrl = global.apiurl + `k12/trainings/enrollHomework`;
      utilJs.postMethod(
        postUrl,
        data,
        (res) => {
        },
        (failRes) => {
        }
      );
    },
    // 去写作业
    goDoHomework() {
      if (this._isLock) {
        this.$showCjToast({
          text: '内容未解锁',
          type: 'warn'
        });
        return
      }

      this.isShowAll = false
      if (this.assign.isSubmit) {
        this.reWorker()
        return
      }
      if (this.homeworkType == 1) {
        this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/simpleQue?homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
      } else {
        this.$routerGo(this, "push", {
          path: `/homePage/schoolAssignment/schoolAnswer?homeworkType=${this.homeworkType}&thwId=${this.thwId}&ttId=${this.ttId}&tpId=${this.tpId}&tlId=${this.tlId}`
        });
      }
    },
    playAplayer(src) {
      if (typeof src == 'string') {
        let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src !== src) {
            arr[i].pause();
          }
        }
      }
    },
    getUserShowHomeworkAnswer() {
      if (loading) {
        return
      }
      loading = true
      let postUrl = global.apiurl + "k12/trainings/" + this.thwId + '/getUserShowHomeworkAnswer?page=' + pagekAnswer + '&limit=' + LIMIT;
      utilJs.getMethod(postUrl,
        res => {
              for (let i in res.data) {
                res.data[i].user = {
                  headimgurl:res.data[i].headimgurl,
                  id:res.data[i].id,
                  nickname:res.data[i].nickname,
                  userId:res.data[i].userId,
                  like:res.data[i].like,
                  isLike:res.data[i].isLike,
                }
                let answer = []
                for (let j in res.data[i].answer) {
                  answer[j] = res.data[i].answer[j].answer
                }
                res.data[i].answer = answer
              }
              if (pagekAnswer == 1) {
                  this.otherAnswer = res.data
              } else {
                this.otherAnswer = [...this.otherAnswer, ... res.data];
              }
              console.log(this.otherAnswer, 'ces')
              if (res.data && (res.data.length < LIMIT)) {
                this.answerdataStatus = pagekAnswer == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
              } else {
                this.answerdataStatus = 'HAS_MORE_DATA';
                pagekAnswer++;
              }
              loading = false
        })
    },
    getUserHomeworkAnswer() {
      let postUrl = global.apiurl + "k12/trainings/" + this.thwId + '/getUserHomeworkAnswer?page=' + pagekAnswer + '&limit=' + LIMIT;
      utilJs.getMethod(postUrl,
        res => {
                for (let i in res) {
                  this.homeworkAnswer.push(res[i].answer)
                }
        })
    },
    setLike(index, isMy, id, isLike) {
      console.log(index, isMy, id, isLike)
      if (loading) {
        return
      }
      loading = true
      console.log(index, isMy, id, isLike)
      let postUrl = global.apiurl + `k12/trainings/${id}/userHomeworkLikes`;
      let data = {
        type:isLike ? 0 : 1
      }
      utilJs.postMethod(
        postUrl,
        data,
        (res) => {
          if (isMy) {
            if (data.type == 1) {
              this.assign.user.isLike = true
              this.assign.user.like = this.assign.user.like + 1
            } else {
              this.assign.user.isLike = false
              this.assign.user.like = this.assign.user.like - 1
            }
          } else {
            if (data.type == 1) {
              this.otherAnswer[index].user.like = this.otherAnswer[index].user.like + 1
              this.otherAnswer[index].user.isLike = true
            } else {
              this.otherAnswer[index].user.like = this.otherAnswer[index].user.like - 1
              this.otherAnswer[index].user.isLike = false
            }
          }
          loading = false
        },
        (failRes) => {
          loading = false
        }
      );
    },
    //获取详情
    getAssignDetail() {
      if (loading) {
        return
      }
      loading = true
      // let $this = this
      let postUrl = global.apiurl + "k12/trainings/" + this.thwId + '/getHomeworkDetail?ttId=' + this.ttId + '&tlId=' + this.tlId + '&page=' + page + '&limit=' + LIMIT;
      utilJs.getMethod(postUrl,
        res => {
            if (JSON.stringify(res) === '[]') {
              this.$showCjToast({
                text:"作业没有权限",
                type: "warn",
                time: 1500
              });
              this.$routerGo(this, "replace", {
                path: `/homePage/camp/campDetail?campId=${this.ttId}`
              });
              return
            }
            if (this.homeworkType == 2) {
              res.user.isLike = res.isLike
              res.user.like = res.like
              res.user.id = res.thwaId
              this.assign = res
              if (page == 1) {
                this.relates = res.relates.data
              } else {
                this.relates = [...this.relates, ... res.relates.data];
              }
              if (res.relates.data && (res.relates.data.length < LIMIT)) {
                this.dataStatus = page == 1 && res.relates.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
              } else {
                this.dataStatus = 'HAS_MORE_DATA';
                page++;
              }
            } else if (this.homeworkType == 1) {
              res.user.isLike = res.isLike
              res.user.like = res.like
              res.user.id = res.userAnswer ? res.userAnswer.thwaId : ''
              this.assign = res
              this.picture = res.media.picture
              this.audios = res.media.audios
              console.log(this.assign, 1111111111111111)
            }
            this.userAnswer = res.userAnswer
            this.comments = res.comments
            this._isLock = res.isLock //训练营的作业是否解锁
            console.log(this.picture, this.audios)
            let that = this
            loading = false
            this.$nextTick(() => {
              //获取当前内容的行高，超过3行则显示更多
              let queryTextContent = document.querySelectorAll("#text");
              console.log(queryTextContent)
              if (!queryTextContent) {
                return;
              }
              let showProblem = false
              if (this.homeworkType == 1) {
                showProblem = this.picture.length > 0 ? true : false
              }
              if (that.$refs.text && that.$refs.text.offsetHeight <= 89 && !showProblem) {
                that.nobtn = false
              } else {
                that.nobtn = true
              }
              if (res.isSubmit) {
                this.showDesc = false;
                this.getUserHomeworkAnswer()
              } else {
                this.showDesc = true;
              }
            })
            this.$nextTick(() => {
              //获取当前内容的行高，超过3行则显示更多
              let queryTextContent = document.querySelectorAll("#textAnswer");
              if (!queryTextContent) {
                return;
              }
              if (that.$refs.textAnswer && that.$refs.textAnswer.offsetHeight <= 89) {
                that.showDescAnswer = false
              } else {
                that.showDescAnswer = true
              }
            })
            this.getUserShowHomeworkAnswer()
            this.wechatShare()
        })
    },
    //分享
    wechatShare: function () {
      let title = this.assign.title || window.localStorage.getItem("companyName");
      let shareImg = this.assign.shareImg || window.localStorage.getItem("shareLogo");
      let shareDesc = this.assign.shareDesc || window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?homeworkType=${this.homeworkType}&thwId=${this.thwId}&tlId=${this.tlId}&ttId=${this.ttId}&tpId=${this.tpId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      utilJs.wechatConfig(
        shareIndexData.shareUrl,
        shareIndexData.title,
        shareIndexData.shareImg,
        shareIndexData.shareDesc,
        function () {},
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = this.assign.title || window.localStorage.getItem("companyName");
      let shareImg = this.assign.shareImg || window.localStorage.getItem("shareLogo");
      let shareDesc = this.assign.shareDesc || window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?homeworkType=${this.homeworkType}&thwId=${this.thwId}&tlId=${this.tlId}&ttId=${this.ttId}&tpId=${this.tpId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      utilJs.appShareTrue(
        shareIndexData.title,
        shareIndexData.shareImg,
        shareIndexData.shareUrl,
        shareIndexData.shareDesc
      );
    },
    clickShowMore() {
      this.showMore = !this.showMore
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.answerdataStatus == 'HAS_MORE_DATA' && this.otherAnswer.length > 0) {
          this.getUserShowHomeworkAnswer();
        }
      });
    },
  },
  activated() {
    this.inintDate()
    setDocumentTitle("作业介绍"); // eslint-disable-line
  },
  deactivated() {
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style scoped>
body{background-color: #F5F7FA;}
.tinymce-text{
  color: #666;
}
.tinymce-text >>> a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.prodType-triangle {
  width: 0;
  height: 0;
  border-width: 0.2rem 0.2rem 0 0.2rem;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  bottom: 0;
  right: 0;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.c-hh166{height: 4.15rem;}
</style>
